/**
 * 大屏中间
 */

import {
  forwardRef,
  ForwardRefRenderFunction,
  useCallback,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import { MyObject } from "../..";
import { Button, ConfigProvider, Input, message, Switch, Tooltip } from "antd";
import LiquidFillSt from "../liquidFillSt";
import LiquidFillNd from "../liquidFillNd";
import {
  getKshGetRTSP,
  getKshGetRTSPAddr,
  getKshHandLift,
  getKshJrLqStatus,
  getKshKaiMen,
  getKshSet,
  getKshSetPCZ,
  getKshSwitchLoadStatus,
  IKshSwitchJrLqStatus,
  postKshLoadButton,
  postKshSetKqpParam,
} from "../../api";
import { WebRtcStreamerxiaoxujs } from "../../../../assets/fun/webrtcstreamer";
import RadarStatus from "../RadarStatus";
import {
  CBBottomBox,
  CenterBottomItem,
  CenterBottomItemJLM,
  CenterBottomItemKQPSZ,
  CenterBottomItemYYZYX,
} from "./style";
import Yeyazhan from "../Yeyazhan";
import { ButtonBox } from "../../style";
// import { gethandleTemplateDownload } from "../../../../assets/fun/fileDownloadFun";

// 定义你想要暴露的ref接口
export interface IChildRef {
  getZhuangtaiFun: () => void;
}
let kgSwitch = true;

const CenterVideo: ForwardRefRenderFunction<
  IChildRef,
  {
    wsData?: MyObject;
    liaocangId?: React.Key; // 料仓id
    chedaohao: string; // 装车站号
  }
> = ({ wsData, liaocangId, chedaohao }, ref) => {
  const [radarStatusShow, setRadarStatusShow] = useState(false); // 雷达状态弹窗
  const [count, setCount] = useState("");
  const videoEleAdd = useRef<any>();
  const videoEleAdd1 = useRef<any>();
  const videoEle = useRef(null); //视频连接
  const videoEle1 = useRef(null); //视频连接
  // const [options, setOptions] = useState<any>([]);
  const [yeyazhanShow, setYeyazhanShow] = useState(false); // 油站监测
  const [zhuangtai, setZhuangtai] = useState({
    jiare: false,
    lengque: false,
  });
  const [kqpStatus, setKqpStatus] = useState<1 | 2 | 3>(2);
  const [dlTime, setDlTime] = useState<number>(0); // 堵料等待时间秒
  const [jgTime, setJgTime] = useState<number>(0); // 间隔时间秒 - 偏差值
  const [zcmsLoading, setZcmsLoading] = useState(false); // 装车模式
  const [pianyiValue, setPianyiValue] = useState<string>("0"); // 平移值
  const [videoShow, setVideoShow] = useState(false); // 是否显示视频遮罩层
  const [mobanxiazaiLoading, setMobanxiazaiLoading] = useState(false);
    const [shibiaodianji, setShibiaodianji] = useState(false); // 校准按钮加载中

  useEffect(() => {

    return () => {
    }
  }, [wsData])


  useImperativeHandle(ref, () => ({
    getZhuangtaiFun: getZhuangtaiFun,
  }));

  // // 装车站状态
  // const LoadingStatusFun = useCallback(async () => {
  //   if (liaocangId) {
  //     const { code, msg, data } = (await postKshLoadStatus({
  //       id: liaocangId,
  //     })) as { code: number; msg: string; data: number };
  //     if (code === 20000) {
  //       setLoadingStatus(data);
  //     } else {
  //       message.error(msg);
  //     }
  //   }
  // }, [liaocangId]);

  const getZhuangtaiFun = useCallback(async () => {

    if (liaocangId) {
      const { code, msg, data } = (await getKshJrLqStatus({
        id: liaocangId,
      })) as {
        code: number;
        msg: string;
        data: IKshSwitchJrLqStatus;
      };
      if (code === 20000) {
        setZhuangtai({
          jiare: data.jrStatus === 0,
          lengque: data.lqStatus === 0,
        });
        setKqpStatus(data.kqpStatus);
        setDlTime(data.dlTime);
        setJgTime(data.jgTime);
      } else {
        message.error(msg);
      }
    }
  }, [liaocangId]);
  useEffect(() => {
    getZhuangtaiFun();
  }, [getZhuangtaiFun]);

  const handleClick = async (key: string, value: string | boolean) => {
    if (!liaocangId) {
      message.error("请先选择装车站");
      return;
    }
    const params = {
      id: liaocangId,
      key: key,
      value: value,
    };
    const { code, msg } = (await getKshSet(params)) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success(msg);
    } else {
      message.error(msg);
    }
  };

  //建立视频连接
  const videoFun = useCallback(async () => {
    //请求视频url
    if (liaocangId) {
      if (videoEleAdd.current) {
        videoEleAdd.current.disconnect();
      }
      if (videoEleAdd1.current) {
        videoEleAdd1.current.disconnect();
      }
      const { code, msg, data } = (await getKshGetRTSP({
        id: liaocangId,
      })) as {
        code: number;
        msg: string;
        data?: string;
      };
      if (code === 20000) {
        const value = data;
        if (value) {
          const arr = value.split(",");
          // let options = arr.map((item: string, index: number) => ({
          //   label: item,
          //   value: item,
          // }));
          // setOptions(options);
          if (videoEle.current) {
            videoEleAdd.current = new WebRtcStreamerxiaoxujs(
              videoEle.current!,
              "http://localhost:8001"
            );
            videoEleAdd.current.connect(arr[0]);
            fetch("http://localhost:8001/api/getIceServers")
              .then(response => {
                if (response.ok) {
                  setVideoShow(false);
                } else {
                  console.log('失败');
                }
              })
              .catch(error => {
                setVideoShow(true);
                console.log('错误:', error);
              });
          }
          if (videoEle1.current && arr.length > 1) {
            videoEleAdd1.current = new WebRtcStreamerxiaoxujs(
              videoEle1.current!,
              "http://localhost:8001"
            );
            videoEleAdd1.current.connect(arr[1]);
          }
        }

      } else {
        message.error(msg);
      }
    }

    return () => {
      if (videoEleAdd.current) {
        videoEleAdd.current.disconnect();
      }
      if (videoEleAdd1.current) {
        videoEleAdd1.current.disconnect();
      }
    };
  }, [liaocangId]);

  // const handleChange = (value: string) => {
  //   if (videoEleAdd.current) {
  //     videoEleAdd.current.disconnect();
  //   }
  //   videoEleAdd.current = new WebRtcStreamerxiaoxujs(
  //     videoEle.current!,
  //     "http://localhost:8001"
  //   );
  //   videoEleAdd.current.connect(value);
  // };

  useEffect(() => {
    videoFun();
  }, [videoFun]);

  const handleClickBtn = async (type: string) => {
    message.success("操作成功");
    const { code, msg } = (await postKshLoadButton({
      channelNo: chedaohao,
      loadType: type,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      // message.success("操作成功");
    } else {
      message.error(msg);
    }
  };

  /**
   * 卷帘门
   * @param number 卷帘门编号 1 2
   * @param status 状态 0:开启 1：关闭
   * @param type 类型 0:上升 1：下降
   */
  const handleChangeJuanlianmen = async (
    number: number,
    status: number,
    type: number
  ) => {
    if(status === 0) {
      setShibiaodianji(true);
    }else if(status === 1) {
      console.log('点击了关闭按钮')
      setShibiaodianji(false);
    }
    const { code, msg } = (await getKshKaiMen({
      id: chedaohao,
      number: number,
      status: status,
      type: type,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("操作成功");
    } else {
      message.error(msg);
    }
    // handleClick(`b${id}`, value);
  };
  // 修改空气炮模式
  const handleKQPClick = async (status: 1 | 2 | 3) => {
    if (!liaocangId) {
      message.error("请先选择装车站");
      return;
    }
    const { code, msg } = (await postKshSetKqpParam({
      id: liaocangId,
      kqpStatus: status,
      dlTime: dlTime,
      jgTime: jgTime,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success(msg);
      setKqpStatus(status);
    } else {
      message.error(msg);
    }
  };
  const handleSwitch = async (checked: boolean) => {
    // if (location.state) {
      if (!liaocangId) {
        message.error("请选择装车站");
        return;
      }
      setZcmsLoading(true);
      const { code, msg } = (await getKshSwitchLoadStatus({
        id: liaocangId,
        status: checked ? 0 : 1,
      })) as { code: number; msg: string };
      if (code === 20000) {
        message.success("装车模式切换成功");
      } else {
        message.error(msg);
      }
      setZcmsLoading(false);
    // }
  };
  //设定偏差值
  const handlePianchazhi = async () => {
    // handleClick("jgTime", jgTime);
    if (!liaocangId) {
      message.error("请选择装车站");
      return;
    }
    const { code, msg } = (await postKshSetKqpParam({
      id: liaocangId,
      kqpStatus: kqpStatus,
      dlTime: dlTime,
      jgTime: jgTime,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("设置成功");
    } else {
      message.error(msg);
    }
  };
  //空气 炮延时设置
  const handleYanshi = async () => {
    if (!liaocangId) {
      message.error("请选择装车站");
      return;
    }
    const { code, msg } = (await postKshSetKqpParam({
      id: liaocangId,
      kqpStatus: kqpStatus,
      dlTime: dlTime,
      jgTime: jgTime,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("设置成功");
    } else {
      message.error(msg);
    }
  };
  // 设置偏移
  const handlePianyi = async () => {
    if (!liaocangId) {
      message.error("请选择装车站");
      return;
    }
    const { code, msg } = (await getKshSetPCZ({
      id: liaocangId,
      value: pianyiValue,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("设置成功");
    } else {
      message.error(msg);
    }
  };

  return (
    <div className="neirong_center">

      <div className="video-box">

        <div className="title">
          <div className="text">监控摄像头</div>
          <div className="btn-box">
            <div
              className="btn"
              style={{ width: "11rem" }}
              onClick={() => setRadarStatusShow(true)}
            >
              <span
                className="iconfont"
                style={{ transform: "rotate(270deg)" }}
              >
                &#xe62d;
              </span>
              <span style={{ marginLeft: ".3rem" }}>雷达监测状态</span>
            </div>
            <div
              className="btn"
              onClick={() => {
                window.location.href = "xiaoxujs://";
              }}
            >
              <span
                className="iconfont"
                style={{ transform: "rotate(270deg)" }}
              >
                &#xe62d;
              </span>
              <span style={{ marginLeft: ".3rem" }}>雷达系统</span>
            </div>
            <div className="btn" onClick={() => handleClickBtn("1")}>
              <span
                className="iconfont"
                style={{ transform: "rotate(270deg)" }}
              >
                &#xe62d;
              </span>
              <span style={{ marginLeft: ".3rem" }}>前进</span>
            </div>
            <div className="btn" onClick={() => handleClickBtn("3")}>
              <span className="iconfont">&#xe62b;</span>
              <span style={{ marginLeft: ".3rem" }}>停车</span>
            </div>
            <div className="btn" onClick={() => handleClickBtn("2")}>
              <span className="iconfont" style={{ transform: "rotate(90deg)" }}>
                &#xe62d;
              </span>
              <span style={{ marginLeft: ".3rem" }}>后退</span>
            </div>
            <div className="btn" onClick={() => handleClickBtn("4")}>
              <span className="iconfont">&#xe6aa;</span>
              <span style={{ marginLeft: ".3rem" }}>完成</span>
            </div>
          </div>
          <div className="select">
            {/* <ConfigProvider
              theme={{
                components: {
                  Select: {
                    activeBorderColor: "rgba(255,255,255,0)",
                    activeOutlineColor: "rgba(255,255,255,0)",
                    colorBgContainer: "rgba(255,255,255,0)",
                    colorBgElevated: "rgba(11,42,81,0.8)",
                    colorText: "#7E8C9E",
                    colorBorder: "rgba(255,255,255,0)",
                    colorTextPlaceholder: "#7E8C9E",
                    colorTextDescription: "#7E8C9E",
                    optionSelectedBg: "rgba(11,42,81,1)",
                  },
                },
              }}
            >
              {options.length > 0 && (
                <Select
                  defaultValue={options[0].value}
                  style={{ width: "15rem" }}
                  options={options}
                  onChange={handleChange}
                />
              )}
            </ConfigProvider> */}
          </div>
        </div>
        <div className="video">
          {
            videoShow && <div className="video_zezao">
              当前电脑没有安装视频服务，无法观看视频，请下载安装后重试
              <Button type='primary' style={{ marginTop: '2rem' }} loading={mobanxiazaiLoading} onClick={async () => {
                setMobanxiazaiLoading(true);
                const { code, msg, data } = (await getKshGetRTSPAddr()) as {
                  code: number;
                  msg: string;
                  data?: string;
                };
                if (code === 20000) {
                  if (data) {
                    // gethandleTemplateDownload(data, {}, 'zip', 'arraybuffer', () => {
                    //   setMobanxiazaiLoading(false);
                    // })
                      const a = document.createElement('a');
                      a.href = data;
                      a.download = '文件.zip'; // 设置下载文件名
                      document.body.appendChild(a);
                      a.click();
                      document.body.removeChild(a);
                      setMobanxiazaiLoading(false);
                  }
                } else {
                  message.error(msg);
                  setMobanxiazaiLoading(false);
                }

              }}>下载安装</Button>
            </div>
          }

          <video
            ref={videoEle}
            style={{
              width: "49.5%",
              height: "100%",
              border: "1px soild rgb(0,87,104)",
              objectFit: "contain",
              background: "#000000",
            }}
            id="video"
            controls
            muted
            preload="auto"
          ></video>
          <video
            ref={videoEle1}
            style={{
              width: "49.5%",
              height: "100%",
              border: "1px soild rgb(0,87,104)",
              objectFit: "contain",
              background: "#000000",
            }}
            id="video"
            controls
            muted
            preload="auto"
          ></video>
        </div>
      </div>
      <div className="center_bottom">
        <div className="cb_top">
          <CenterBottomItem>
            <div className="title">更多按钮设置</div>

            <div className="caozuo_box">
              <div style={{ display: 'flex', marginBottom: '1rem' }}>
                <ButtonBox
                  onClick={async () => {
                    if (liaocangId) {
                      const { code, msg } = (await getKshHandLift({
                        id: liaocangId,
                        type: 1,
                      })) as { code: number; msg: string };
                      if (code === 20000) {
                        message.success("手动抬杆成功");
                      } else {
                        message.error(msg);
                      }
                    }
                  }}
                >抬杆
                </ButtonBox>
                <ButtonBox
                  onClick={async () => {
                    if (liaocangId) {
                      const { code, msg } = (await getKshHandLift({
                        id: liaocangId,
                        type: 0,
                      })) as { code: number; msg: string };
                      if (code === 20000) {
                        message.success("手动抬杆成功");
                      } else {
                        message.error(msg);
                      }
                    }
                  }}
                >落杆
                </ButtonBox>
              </div>

              <div className="zhuangchemoshi_btn">
                <div>装车模式:</div>
                <ConfigProvider
                  theme={{
                    components: {
                      Switch: {
                        // trackHeight: 24,
                        // handleSize: 24,
                        // innerMaxMargin: 24,
                        // fontSize: 20,
                      },
                    },
                  }}
                >
                  <Switch
                    checkedChildren="自动"
                    unCheckedChildren="手动"
                    checked={wsData && wsData['s50'] === 0}
                    onChange={handleSwitch}
                    loading={zcmsLoading}
                  />
                </ConfigProvider>
              </div>
            </div>
          </CenterBottomItem>
          <CenterBottomItemYYZYX>
            <div className="title">
              <div className="text-title">液压站运行</div>
              <div className="button_box" onClick={() => setYeyazhanShow(true)}>
                设备控制
              </div>
            </div>
            <div className="liquidFillBox">
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  padding: "0 1.5rem",
                  boxSizing: "border-box",
                }}
              >
                <LiquidFillSt
                  countData={
                    wsData && wsData["s42"] ? (wsData["s42"] as string) : "0"
                  }
                />
                <div className="styleBox" style={{ fontSize: "2rem" }}>
                  <div className="smallTitle">液位</div>
                  <div className="styleNum">
                    {wsData && wsData["s42"] ? wsData["s42"] : 0}
                    <span style={{ fontSize: "1.2rem", marginLeft: ".5rem" }}>
                      MM
                    </span>
                  </div>
                </div>
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  width: "49%",
                  padding: "0 1.5rem",
                  boxSizing: "border-box",
                }}
              >
                <LiquidFillNd
                  countData={
                    wsData && wsData["s43"] ? (wsData["s43"] as string) : "0"
                  }
                />
                <div className="styleBox" style={{ fontSize: "2rem" }}>
                  <div className="smallTitle">压力</div>
                  <div className="styleNum2">
                    {wsData && wsData["s43"] ? wsData["s43"] : 0}
                    <span style={{ fontSize: "1.2rem", marginLeft: ".5rem" }}>
                      Pa
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </CenterBottomItemYYZYX>
        </div>
        <div className="cb_bottom">
          <CBBottomBox>
            <div className="cb_bottom_text-title">一键控制双给料机</div>
            <div className="cb_bottom_yyz-content">
              <div className="yyz-item-one">
                <div className="yyz-title">手动装载量</div>
                <div className="yyz-value">
                  <span>
                    {wsData && wsData["s33"]
                      ? kgSwitch
                        ? (Number(wsData["s33"]) / 1000).toFixed(2)
                        : wsData["s33"]
                      : 0}
                  </span>
                  <span style={{ fontSize: "1.4rem", marginLeft: ".3rem" }}>
                    {kgSwitch ? "吨" : "千克"}
                  </span>
                </div>
              </div>
              <div className="yyz-item">
                <div className="yyz-title">
                  设置手动装载量{kgSwitch ? "(吨)" : "(千克)"}
                </div>
                <div className="inputBox">
                  <Input
                    className="inputLeft"
                    placeholder="请输入数字"
                    value={count}
                    onChange={(e) => setCount(e.target.value)}
                  />
                  <div
                    className="inputRight"
                    //如果是吨的话 则需要乘1000
                    onClick={() =>
                      handleClick(
                        "b21",
                        kgSwitch ? String(Number(count) * 1000) : count
                      )
                    }
                  >
                    设定
                  </div>
                </div>
              </div>
            </div>
            <div className="cb_bottom_yyz-content">
              <div className="yyz-item-one">
                <div className="yyz-title-shishi">实时装载量(吨)</div>
                {/* <div className="yyz-value">
                  <span>{heValue}</span>
                </div> */}
              </div>
              <div className="shishizhuangzailianghe">
                {wsData && wsData["s67"] ? wsData["s67"] : 0}
              </div>
            </div>
            <div className="cb_bottom_yyz-content">
              <div className="yyz-item-one">
                <div className="yyz-title">偏差值</div>
                <div className="yyz-value">
                  <span>{wsData && wsData["s49"] ? wsData["s49"] : 0}</span>
                </div>
              </div>
              <div className="yyz-item">
                <div className="yyz-title">设定偏差值(KG)</div>
                <div className="inputBox">
                  <Input
                    className="inputLeft"
                    placeholder="请输入数字"
                    value={pianyiValue}
                    onChange={(e) => setPianyiValue(e.target.value)}
                  />
                  <div
                    className="inputRight"
                    //如果是吨的话 则需要乘1000
                    onClick={() => handlePianyi()}
                  >
                    设定
                  </div>
                </div>
              </div>
            </div>

            {/* <CenterBottomItemPCZSD>
              <div className="title">
                <div className="text-title">偏差值设定</div>
              </div>
              <div className="yyz-content">
                <div className="yyz-item-one">
                  <div className="yyz-title">偏差值</div>
                  <div className="yyz-value">
                    <span>{pianyiValueText}</span>
                  </div>
                </div>
                <div className="yyz-item">
                  <div className="yyz-title">设定偏差值</div>
                  <div className="inputBox">
                    <Input
                      className="inputLeft"
                      placeholder="请输入数字"
                      value={pianyiValue}
                      onChange={(e) => setPianyiValue(e.target.value)}
                    />
                    <div
                      className="inputRight"
                      //如果是吨的话 则需要乘1000
                      onClick={() => handlePianyi()}
                    >
                      设定
                    </div>
                  </div>
                </div>
              </div>
            </CenterBottomItemPCZSD>
            <CenterBottomItemYJKZ>
              <div className="title">
                <div className="text-title">一键控制双给料机</div>
                <div className="switchBox">
                  <div
                    className={`dun ${kgSwitch ? "active" : "unactive"}`}
                    onClick={() => setKgSwitch(!kgSwitch)}
                  >
                    吨
                  </div>
                  <div
                    className={`dun ${kgSwitch ? "unactive" : "active"}`}
                    onClick={() => setKgSwitch(!kgSwitch)}
                  >
                    千克
                  </div>
                </div>
              </div>
              <div className="yyz-content">
                <div className="yyz-item-one">
                  <div className="yyz-title">手动装载量</div>
                  <div className="yyz-value">
                    <span>
                      {wsData && wsData["s33"]
                        ? kgSwitch
                          ? (Number(wsData["s33"]) / 1000).toFixed(2)
                          : wsData["s33"]
                        : 0}
                    </span>
                    <span style={{ fontSize: "1.4rem", marginLeft: ".3rem" }}>
                      {kgSwitch ? "吨" : "千克"}
                    </span>
                  </div>
                </div>
                <div className="yyz-item">
                  <div className="yyz-title">
                    设置手动装载量{kgSwitch ? "(吨)" : "(千克)"}
                  </div>
                  <div className="inputBox">
                    <Input
                      className="inputLeft"
                      placeholder="请输入数字"
                      value={count}
                      onChange={(e) => setCount(e.target.value)}
                    />
                    <div
                      className="inputRight"
                      //如果是吨的话 则需要乘1000
                      onClick={() =>
                        handleClick(
                          "b21",
                          kgSwitch ? String(Number(count) * 1000) : count
                        )
                      }
                    >
                      设定
                    </div>
                  </div>
                </div>
              </div>
            </CenterBottomItemYJKZ> */}
          </CBBottomBox>
          <div className="cb_right">
            <CenterBottomItemKQPSZ>
              <div className="title">空气炮设置</div>
              <div className="kongqipao_btn_box">
                <div
                  className={`kongqipao_btn ${kqpStatus === 1 ? "active" : "unactive"
                    }`}
                  onClick={() => handleKQPClick(1)}
                >
                  手动
                </div>
                <Tooltip title={"料仓不下料则启动一次空气炮，1-4号轮流启动"}>
                  <div
                    className={`kongqipao_btn ${kqpStatus === 2 ? "active" : "unactive"
                      }`}
                    onClick={() => handleKQPClick(2)}
                  >
                    堵料模式
                  </div>
                </Tooltip>
                <Tooltip
                  title={
                    "首次启动给煤机则启动一次空气炮，后续根据设定间歇时间1-4号轮流启动"
                  }
                >
                  <div
                    className={`kongqipao_btn ${kqpStatus === 3 ? "active" : "unactive"
                      }`}
                    onClick={() => handleKQPClick(3)}
                  >
                    间歇模式
                  </div>
                </Tooltip>
              </div>
              {kqpStatus === 2 && (
                <div className="shezhi_input_box">
                  <div className="shezhi_input_title">*堵料延时设定值(秒)</div>
                  <div className="inputBox">
                    <Input
                      className="inputLeft"
                      placeholder="请输入数字"
                      value={dlTime}
                      onChange={(e) => setDlTime(Number(e.target.value))}
                    />
                    <div
                      className="inputRight"
                      //如果是吨的话 则需要乘1000
                      onClick={() => handleYanshi()}
                    >
                      设定
                    </div>
                  </div>
                </div>
              )}
              {kqpStatus === 3 && (
                <div className="shezhi_input_box">
                  <div className="shezhi_input_title">*间歇时间设定值(秒)</div>
                  <div className="inputBox">
                    <Input
                      className="inputLeft"
                      placeholder="请输入数字"
                      value={jgTime}
                      onChange={(e) => setJgTime(Number(e.target.value))}
                    />
                    <div
                      className="inputRight"
                      //如果是吨的话 则需要乘1000
                      onClick={() => handlePianchazhi()}
                    >
                      设定
                    </div>
                  </div>
                </div>
              )}
            </CenterBottomItemKQPSZ>
            <CenterBottomItemJLM>
              <div className="jlm_left">
                <div className="title">入口卷帘门</div>
                <div className="zm-xinxi">
                  <div className="btn-box">
                    <div
                      className="btn"
                      onMouseDown={() => handleChangeJuanlianmen(1, 0, 0)}
                      onMouseUp={() => handleChangeJuanlianmen(1, 1, 0)}
                      onMouseOut={() => {
                        if (shibiaodianji) {
                          handleChangeJuanlianmen(1, 1, 0)
                        }
                      }}
                    >
                      上升
                    </div>
                    <div
                      className="btn"
                      onMouseDown={() => handleChangeJuanlianmen(1, 0, 1)}
                      onMouseUp={() => handleChangeJuanlianmen(1, 1, 1)}
                      onMouseOut={() => {
                        if (shibiaodianji) {
                          handleChangeJuanlianmen(1, 1, 1)
                        }
                      }}
                    >
                      下降
                    </div>
                  </div>
                </div>
              </div>
              <div className="jlm_right">
                <div className="title">出口卷帘门</div>
                <div className="rfj-xinxi">
                  <div className="btn-box">
                    <div
                      className="btn"
                      onMouseDown={() => handleChangeJuanlianmen(2, 0, 0)}
                      onMouseUp={() => handleChangeJuanlianmen(2, 1, 0)}
                      onMouseOut={() => {
                        if (shibiaodianji) {
                          handleChangeJuanlianmen(2, 1, 0)
                        }
                      }}
                    >
                      上升
                    </div>
                    <div
                      className="btn"
                      onMouseDown={() => handleChangeJuanlianmen(2, 0, 1)}
                      onMouseUp={() => handleChangeJuanlianmen(2, 1, 1)}
                      onMouseOut={() => {
                        if (shibiaodianji) {
                          handleChangeJuanlianmen(2, 1, 1)
                        }
                      }}
                    >
                      下降
                    </div>
                  </div>
                </div>
              </div>
            </CenterBottomItemJLM>
          </div>
        </div>

        {/* 液压站 */}

      
      </div>
      <RadarStatus
        open={radarStatusShow}
        setOpen={setRadarStatusShow}
        liaocangId={liaocangId}
      />
      <Yeyazhan
        open={yeyazhanShow}
        wsData={wsData}
        liaocangId={chedaohao}
        zhuangtai={zhuangtai}
        handleCallback={() => {
          setYeyazhanShow(false);
        }}
        getZhuangtaiFun={getZhuangtaiFun}
      ></Yeyazhan>
    </div>
  );
};

export default forwardRef(CenterVideo);
